<template>
  <div>
    <HeaderTop :enable-shadow="true"/>
    <div class="al-box-container">

      <div class="al-flex-wrap al-box-pretty al-width-50 al-flex-container-center-vh gradient-bg">
        <div class="al-m-10px">
          <input v-model="keyword"
                 style="padding: 11px"
                 class="al-bgcolor-transparent al-border-capsule al-show-border-blue"/>
        </div>
        <div class="al-m-10px">
          <el-button class="al-bgcolor-transparent" round @click="getAllSearch">
            <span class="el-icon-search"></span>
            搜索
          </el-button>
        </div>
      </div>

      <div class="al-box-container al-box-pretty">
        <!--        <div v-if="searchData[1].note == '约拍'">-->
        <!--          <ShowAppointmentComponent :all-appointment="searchData[1].rs" />-->
        <!--        </div>-->

        <!--        {{searchData[1].rs}}-->
        <ShowAppointmentComponent mode="list-h"
                                  :all-appointment="worksData"/>

      </div>
    </div>

    <ALFooter/>
  </div>
</template>

<script>
  import HeaderTop from "../../components/public/HeaderTop";
  import ALFooter from "../../components/public/ALFooter";
  import {request} from "../../util/network/request";
  import {
    SEARCH_ALL,
    SEARCH_APPOINTMENT_ALL,
    SEARCH_APPOINTMENT_BY_KEYWORD, SEARCH_SPOT_ALL, SEARCH_SPOT_BY_KEYWORD,
    SEARCH_WORKS_ALL,
    SEARCH_WORKS_BY_KEYWORD
  } from "../../util/network/api/search/api-search";
  import ShowAppointmentComponent from "../appointment/component/ShowAppointmentComponent";

  export default {
    name: "Search",
    //组件
    components: {ShowAppointmentComponent, ALFooter, HeaderTop},
    //属性
    props: {},

    //数据
    data() {
      return {
        searchData: {},
        keyword: '广州',
        worksData: []
      }
    },

    //挂载完成时
    mounted() {

    },

    //方法
    methods: {
      getAllSearch() {
        request({
          url: 'http://182.61.15.28:19200/' + SEARCH_ALL + this.keyword,
        }).then(res => {
          console.log(res);
          this.searchData = res.data.data;
          this.worksData = res.data.data[1].rs;
        }).catch(err => {
          console.log(err)
        })
      },

      getAllWorksByKeyword() {
        request({
          url: 'http://182.61.15.28:19200/' + SEARCH_WORKS_BY_KEYWORD + this.keyword,
        }).then(res => {
          console.log(res);
          this.searchData = res;
        }).catch(err => {
          console.log(err)
        })
      },

      getAllAppointmentByKeyword() {
        request({
          // url:'http://localhost:19200/' + SEARCH_APPOINTMENT_BY_KEYWORD + this.keyword ,
          url: 'http://182.61.15.28:19200/' + SEARCH_APPOINTMENT_BY_KEYWORD + this.keyword,
        }).then(res => {
          console.log(res);
          this.searchData = res;
        }).catch(err => {
          console.log(err)
        })
      },

      getAllAppointment() {
        request({
          // url:'http://localhost:19200/' + SEARCH_APPOINTMENT_BY_KEYWORD + this.keyword ,
          url: 'http://182.61.15.28:19200/' + SEARCH_APPOINTMENT_ALL,
        }).then(res => {
          console.log(res);
          this.searchData = res;
        }).catch(err => {
          console.log(err)
        })
      },

      getAllSpot() {
        request({
          // url:'http://localhost:19200/' + SEARCH_APPOINTMENT_BY_KEYWORD + this.keyword ,
          url: 'http://localhost:19200/' + SEARCH_SPOT_ALL,
        }).then(res => {
          console.log(res);
          this.searchData = res;
        }).catch(err => {
          console.log(err)
        })
      },

      getAllSpotByKeyword() {
        request({
          // url:'http://localhost:19200/' + SEARCH_APPOINTMENT_BY_KEYWORD + this.keyword ,
          url: 'http://localhost:19200/' + SEARCH_SPOT_BY_KEYWORD + this.keyword,
        }).then(res => {
          console.log(res);
          this.searchData = res;
        }).catch(err => {
          console.log(err)
        })
      }
    },

    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>
  .gradient-bg {
    margin: 0;
    width: 100%;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #eef1f5, #fbc8d4, #6991c7, #e7f0fd);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }


  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  input {
    outline: none;
    background-color: rgba(0, 0, 0, 0);

  }
</style>
